<template>
  <div class="bj">
    <view class="content">
      <view class="title">
        <image class="tthumb" :src="list.thumb" mode=""></image>
        <view class="dy-rbox">
          <view class="dytitle">{{list.title}}</view>
          <view class="dystar">
            <view class="dypc">
              <view class="" v-if="list.rating == '5.0'">
                <uni-icons type="star-filled" size="15" color='#FFDC1D'></uni-icons> <uni-icons type="star-filled" size="15" color='#FFDC1D'></uni-icons> <uni-icons type="star-filled" size="15" color='#FFDC1D'></uni-icons> <uni-icons type="star-filled" size="15" color='#FFDC1D'></uni-icons> <uni-icons type="star-filled" size="15" color='#FFDC1D'></uni-icons> 
              </view>
              <view class="" v-else-if="list.rating == '4.0'" >
                <uni-icons type="star-filled" size="15" color='#FFDC1D'></uni-icons> <uni-icons type="star-filled" size="15" color='#FFDC1D'></uni-icons> <uni-icons type="star-filled" size="15" color='#FFDC1D'></uni-icons> <uni-icons type="star-filled" size="15" color='#FFDC1D'></uni-icons> 
              </view>
              <view class="" v-else-if="list.rating == '3.0'" >
                <uni-icons type="star-filled" size="15" color='#FFDC1D'></uni-icons> <uni-icons type="star-filled" size="15" color='#FFDC1D'></uni-icons> <uni-icons type="star-filled" size="15" color='#FFDC1D'></uni-icons> 
              </view>
              <view class="" v-else-if="list.rating == '2.0'" >
                <uni-icons type="star-filled" size="15" color='#FFDC1D'></uni-icons> <uni-icons type="star-filled" size="15" color='#FFDC1D'></uni-icons> 
              </view>
              <view class="" v-else-if="list.rating == '1.0'" >
                <uni-icons type="star-filled" size="15" color='#FFDC1D'></uni-icons>
              </view>
              <view class="">
                评次
              </view>
              
            </view>
            <view class="tittwo">
              <view class="">{{list.genre}}</view>
              <view class="" style="color: red;">
                {{list.view}}
              </view>
            </view>
            
          </view>
        </view>
      </view>
      <view class="introduce-box">
        <view class="introduce-title">影片简介</view>
        <view :class="unfold== true ? 'introduce_text2' :  'introduce_text'">{{list.plot_summary}}</view>
        <button class="more" type="buuton" @click="onmore()">{{unfold== true  ? '收回' : '更多'}}</button>
      </view>
      <view class="filmreview">
        <view class="filmreview-title">AI写影评</view>
        <view class="topicbox">
          
          
          <div class="evabox" style="width: 100%;" v-if="pltext">
            <span class="mutopic">选择话题</span>
            <span class="zmutopic" :class="item.colours == true ? 'addcolours' : ''" v-for="(item,index) in topic" :key="index" @click="ontopic(item)">{{item.name}}</span>
            <textarea class="evaluate" placeholder="请输入您对该电影的评价..." v-memo="estimate" name="" id="" cols="30" rows="10"></textarea>
            <button class="subbtn" type="button" @click="appraisebtn()">提交</button>
          </div>
          <div style="width: 100%;" v-else>
            <textarea class="retxt" name="" id="" v-model="critictxt" maxlength="-1"></textarea>
            <div style="display: flex;">
              <button type="button" class="plbtn retry" :disabled="forbid" @click="retrybtn()">重试</button>
              <button type="button" class="plbtn copy"  :disabled="forbid"  @click="copybtn()">复制</button>
            </div>
          </div>
          
          <view class="imagebox">
            <view class="">影片图集</view>
            <view class="" style="width: 100%;">
              <!-- <image class="sdasb" :src="poster_urls[0]" mode=""></image> -->
            <uni-swiper-dot class="photo" :info="poster_urls" :current="current" field="content" :mode="mode">
             	<swiper class="swiper-box" @change="change">
             		<swiper-item style="border-radius: 20rpx;" v-for="(item ,index) in poster_urls" :key="index" @click="showImage(item)">
                  <image class=" sdasb":src="item" mode=""></image>
             		</swiper-item>
             	</swiper>
             </uni-swiper-dot>
             
            </view>
          </view>
        </view>
      </view>
    </view>
  </div>
</template>

<script>
  export default {
    onLoad(e) {
   
      this.dyid = e.id
      console.log(this.dyid);
    },
    onShow() {
      this.getlist()
    },
    onPullDownRefresh() {
      setTimeout(()=> {
        this.getlist()
        uni.stopPullDownRefresh()
      },1000)
    },
    data() {
      return {
        list:[],
        dyid:null,
        unfold:false,
        topic:[],
        current: 0,
        poster_urls:[],
        mode: 'round',
        estimate:'',
        topicArr:[],
        pltext:true,
        critictxt:'',
        repetition:'',
        repsun:0,
        forbid:false,
        nsun:0
        
      }
    },
    methods:{
      getlist() {
        uni.request({
        	url: getApp().globalData.apiDomain+'movies/info',
        	method: 'POST',
        	header: {
        		'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
        		'token': uni.getStorageSync('wbyun_token'),
            'wbapp':'weixin_mp_xbgy'
        	},
        	data: {
            'id':this.dyid,
          },
        	dataType: 'json',
        	success:  res => {
            
        		if (res['data']['code'] == 200) {
              this.topic = []
              console.log(res['data']);
              this.list = res['data']['datas']
              
              this.poster_urls = this.list.poster_urls
             console.log(this.poster_urls);
              
              let arr = res['data']['datas']['topic'].split(/\r?\n/)
               arr.map(item => {
                 this.topic.push({
                    name: item,
                    colours:false
                  })
                
              })
            
              
        			return;   
        		}else if(res['data']['code'] == '100500') {
              uni.showToast({
              	title:res['data']['msg'],   
              	icon: 'none'
              });
            } else { 
        			uni.showToast({
        				title: res['data']['msg'],
        				icon: 'none'
        			});
        		}
        	},
        	fail: () => {},
        	complete: () => {
        	}
        });
      },
      onmore() {
        this.unfold = !this.unfold
      },
      ontopic(e) {
        this.topic.map(item => {
          if(item.name == e.name) {
            item.colours = !item.colours
          }
        })
        console.log(this.topic);
        
        

        
      },
      copybtn() {
        uni.setClipboardData({
            data: this.critictxt,
            success: function () {
              console.log('复制成功');
              // 可以添加用户友好的提示，例如使用uni.showToast提示复制成功
              uni.showToast({
                title: '复制成功',
                icon: 'success',
                duration: 2000
              });
              }
              })
      },
      retrybtn() {
        this.pltext = true
        this.critictxt = ''
      },
      change(e) {
      			this.current = e.detail.current;
      		},
          appraisebtn() {
            console.log(this.topic);
            let gjc = ''
            this.topic.map(item => {
              if(item.colours == true) {
                console.log(item.name);
                gjc += item.name + '、'
              }
            })
            console.log(gjc.length);
            gjc = gjc.slice(0,gjc.length-1)
            console.log(gjc);
            if(gjc == '') {
              uni.showToast({
              	title:'话题不能为空',   
              	icon: 'none'
              });
              return
            }
            uni.showLoading({
                    title: '正在生成中...',
                    icon: 'none'
                  });
            uni.request({
            	url: getApp().globalData.apiDomain+'ai/paramChat',
            	method: 'POST',
            	header: {
            		'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
            		'token': uni.getStorageSync('wbyun_token'),
                'wbapp':'weixin_mp_xbgy'
            	},
            	data: {
                'vpsoft':'ai_dypl',
                'stream':'yes',
                'id':this.dyid,
                'topic':gjc,
                'content':this.estimate
              },
            	dataType: 'json',
            	success:  res => {
            		if (res['data']['code'] == 200) {
                  console.log(res.data.datas.aid);
                this.getSSEContent(res.data.datas.aid)
                  this.forbid = true
            			return;   
            		}else if(res['data']['code'] == '100500') {
                  uni.showToast({
                  	title:res['data']['msg'],   
                  	icon: 'none'
                  });
                }else if(res['data']['code'] == '519') {
                  uni.showToast({
                  	title: res['data']['msg'],
                  	icon: 'none'
                  });
                  setTimeout(() => {
                    uni.navigateTo({
                      url:'/pagesB/subson/subson/apply'
                    })
                  },2000)
                }else { 
            			uni.showToast({
            				title: res['data']['msg'],
            				icon: 'none'
            			});
            		}
            	},
            	fail: () => {},
            	complete: () => {
            	}
            });
          },
          getSSEContent(e) {
            console.log(e);
            uni.request({
            	url: getApp().globalData.apiDomain+'ai/getSSEContent',
            	method: 'POST',
            	header: {
            		'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
            		'token': uni.getStorageSync('wbyun_token'),
                'wbapp':'weixin_mp_xbgy'
            	},
            	data: {
              'aid':e
              },
            	dataType: 'json',
            	success:  res => {
            		if (res['data']['code'] == 200) {
                  console.log(res.data.datas);
                  if(this.repetition == res.data.datas.content) {
                    this.repsun+=1
                    if(this.repsun >= 10) {
                      uni.showToast({
                      	title:'当前使用人数过多请稍后再试！12',   
                      	icon: 'none'
                      });
                      this.repetition = ''
                      this.repsun = 0
                      this.forbid = false
                      return
                    }
                    
                  }
                  
                    if(res.data.datas.content == null || res.data.datas.content == '') {
                      setTimeout(()=> {
                        this.getSSEContent(e)
                      },1500)
                      this.nsun+=1
                      if(this.nsun >= 10) {
                        uni.showToast({
                        	title:'当前使用人数过多请稍后再试！',   
                        	icon: 'none'
                        });
                        this.nsun = 0
                        this.forbid = false
                        return
                      }
                    }
                    if(res.data.datas.status  == 300) {
                        uni.hideLoading();
                        this.critictxt = res.data.datas.content
                        this.pltext = false
                        this.repetition = res.data.datas.content
                        setTimeout(()=> {
                          this.getSSEContent(e)
                        },1500)
                       
                    }
                    if(res.data.datas.status  == 200) {
                      this.critictxt = res.data.datas.content
                      this.forbid = false
                    }
                    
            			return;   
            		}else if(res['data']['code'] == '100500') {
                  uni.showToast({
                  	title:res['data']['msg'],   
                  	icon: 'none'
                  });
                  this.forbid = false
                } else { 
            			uni.showToast({
            				title: res['data']['msg'],
            				icon: 'none'
            			});
                  this.forbid = false
            		}
            	},
            	fail: () => {},
            	complete: () => {
            	}
            });
          },
          showImage(e) {
            console.log(e);
            let imgPaths = []
            imgPaths.push(e)
            uni.previewImage({
            			current: 0,
            			urls: imgPaths,//图片路径是个数组，数组里面放图片的全路径
            			longPressActions: {  //长按保存图片到相册
            				itemList: ['保存图片'],
            				success: (data)=> {
            					uni.saveImageToPhotosAlbum({ //保存图片到相册
            						filePath: payUrl,
            						success: function () {
            							uni.showToast({icon:'success',title:'保存成功'})
            						},
            						fail: (err) => {
            							uni.showToast({icon:'none',title:'保存失败，请重新尝试'})
            						}
            					});
            				},
            				fail: (err)=> {
            					console.log(err.errMsg);
            				}
            		}
            	})
          }
    }
  }
</script>

<style>
  * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
    
  }
  .bj {
    background-image: url('/static/aibj.jpg');    
    background-size: 100%;
    height:100%;   
    padding-top: 55px;
    background-color: #D242D5;
    background-repeat: no-repeat;
    padding-bottom: 20rpx;
  }
  .content {
    width: 94.5%;
    
    background-color: #fff;
    margin: auto;
    border-radius: 15rpx;
    padding:20rpx;
    margin-bottom: 20rpx;
  }
  .title {
    display: flex;
  }
  .tthumb {
    width: 190rpx;
    height: 260rpx;
    border-radius: 15rpx;
    margin-top: -95rpx;
  }
  .dy-rbox {
   flex: 1;
    margin-left: 35rpx;
  }
  .dytitle {
    font-size: 45rpx;
    font-weight: 700;
  }
  .dystar {
    width: 100%;
    
    margin-top: 18rpx;
    margin-left: -5rpx;
  }
  .dypc {
    width: 90%;
    font-size: 30rpx;
    color: #b6b6b6;
    display: flex;
    justify-content: space-between;
  }
  .tittwo {
    width: 90%;
    margin-top: 15rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #b6b6b6;
  }
  .introduce-box {
    margin-top: 40rpx;
  }
  .introduce-title {
    font-size: 45rpx;
    font-weight: 700;
  }
  .introduce_text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-size: 30rpx;
    line-height: 40rpx;
    margin-top: 15rpx;
    color: #9e9e9e;
  }
  .introduce_text2 {
    font-size: 30rpx;
    line-height: 40rpx;
    margin-top: 15rpx;
    color: #9e9e9e;
  }
  .more {
    width: 250rpx;
    border: 0;
    height: 60rpx;
    line-height: 60rpx;
    border-radius: 40rpx;
    font-size: 30rpx;
    background-image: linear-gradient(to right, rgb(245, 112, 243),rgb(38,132,254) ) !important;
    color: #fff;
    margin-top: 20rpx;
  }
  .filmreview {
    margin-top: 40rpx;
    
  }
  .filmreview-title {
    font-size: 45rpx;
    font-weight: 700;
  }
  .topicbox,.evabox{
    margin-top: 20rpx;
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-between; */
  }
  .mutopic {
    padding:10rpx 30rpx;
    background-color: red;
    border-radius: 15rpx;
    color: #fff;
    font-size: 30rpx;
    margin: 10rpx;
  }
  .zmutopic {
    padding:10rpx 22rpx;
    background-color: #DEDCDC;
    border-radius: 15rpx;
    font-size: 30rpx;
    margin: 10rpx;
  }
  .addcolours {
    color: #fff;
    background-image: linear-gradient(to right, rgb(81, 109, 250), rgb(245, 112, 243))
  }
.evaluate {
  width: 100%;
  height: 170rpx;
  border-radius: 20rpx;
  font-size: 35rpx;
  padding:20rpx;
  margin: 15rpx 0;
  background-color: #DEDCDC;
}
.retxt {
  width: 100%;
  height: 600rpx;
  border-radius: 20rpx;
  padding:20rpx;
  background-color: #DEDCDC;
}
.subbtn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 35rpx;  
  color: #fff;
  background-image: linear-gradient(to right, rgb(245, 112, 243),rgb(38,132,254) ) !important;
  border-radius: 40rpx;
}
.imagebox {
  width: 100%;
  height: 580rpx;
  margin-top: 40rpx;
  font-size: 45rpx;
  font-weight: 700;
}
.picture {
  width: 100%;
  margin: 20rpx 0 40rpx 0;
  border-radius: 40rpx;
}
.plbtn {
      width: 250rpx;
      border: 0;
      height: 60rpx;
      line-height: 60rpx;
      border-radius: 40rpx;
      font-size: 30rpx;
      margin-top: 20rpx;
      color: #fff;
}
.copy {
  background-image: linear-gradient(to right, rgb(245, 112, 243),rgb(38,132,254) ) !important;
}
.retry {
  background-color: #2684FE;
}
.sdasb {
    width: 100%; /* 或者其他指定宽度 */
    /* height: calc(100% -25%); */
/*    padding-bottom: 25%; */ /* 16:9的比例，计算方式为 9 / 16 * 100% */
    border-radius: 20rpx;
    margin-top: 20rpx;
    background-size: cover;
}
.swiper-box {
 width: 670rpx;
  height: 500rpx;
}

</style>